<template>
	<div class="login">
		<header id="header" class="mui-bar mui-bar-nav">
			<i style="color: #fff;" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" v-on:click="back"></i>
			<h1 class="mui-title" style="color: #fff;">登录</h1>
		</header>
		<form class="mui-input-group">
			<div class="mui-input-row">
				<input type="text" placeholder="请输入手机号" class="telNumber">
			</div>
			<div class="mui-input-row">
				<input type="text" class="mui-input-clear yzm" placeholder="请输入短信验证码" data-input-clear="5"><span class="mui-icon mui-icon-clear mui-hidden"></span>
				<label class="hasYzm">获取验证码</label>
			</div>
		</form>
		<p class="jiaoyan"></p>
		<button>登　录</button>
		<div class="alert">
			
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				msg: 'Welcome to Your Vue.js App'
			}
		},
		mounted: function() {
			var that = this;
			let ajaxURL=localStorage.getItem("ajaxURL");
			// 手机号码正则表达式
			var mobile = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
			$('.telNumber').on('keyup',function(){
				if($(this).val().length==11 && mobile.test($('.telNumber').val())){
					$('.jiaoyan').html('');
					$('.telNumber').css('color','#c6c6c6')
				}
			})
			$('.hasYzm').click(function(){
				if(mobile.test($('.telNumber').val())){
					var i=60;
					var timer = setInterval(function(){
						i--;
						$('.hasYzm').html(i+'s后重新获取');
						if(i==50){
							clearInterval(timer)
							$('.hasYzm').html('重新获取');
						}
					},1000)
					$.ajax({
						type:"get",
		                dataType:"jsonp",
		                url:`${ajaxURL}/houseweb/login/userPhotoCode.do`,
						cache:false,
						data:{
							telNumber:$('.telNumber').val()
						},
		                success:function(data){
		                	console.log(data)
		                }
		           })
					$('.telNumber').css('color','#c6c6c6')
					$('.jiaoyan').html('')
				}else{
					$('.telNumber').css('color','red')
					$('.jiaoyan').html('手机号码输入错误!')
				}
			})
			$('button').click(function(){
				let data = {
					telNumber:$('.telNumber').val(),
					yzm:$('.yzm').val(),
					telIp:returnCitySN['cip']
				}
				$.ajax({
					type:"post",
					url:"${ajaxURL}/houseweb/login/handleCustomerMsgByPhoto.do",
					async:true,
					dataType:'jsonp',
					data:data,
					success:function(res){
						console.log(res)
						localStorage.setItem('user',JSON.stringify(res.data))
						if(res.msg=='成功'){
							that.$router.push({
								path: '/user',
								name: 'user',
								query:{
									userName:res.data.userName,
									tic:'new',
									userid:res.data.userId,
								}
							});
						}else{
//							$('.alert').html('登录失败!').show(500)
//							setTimeout(function(){
//								$('.alert').hide(500)
//							},2000)
							$('.yzm').css('color','red');
							$('.jiaoyan').html('验证码输入错误,请重新输入!')
						}
					}
				});
			})
		},
		methods:{
			back() {
				this.$router.go(-1); //返回上一层
			},
		}
	}
</script>

<style>
	.login .mui-bar-nav {
		position: fixed;
		top: 0;
		height: 50px;
		background-color: #0186c2;
	}
	
	.mui-bar-nav a {
		color: #fff;
	}
	
	.mui-bar-nav.mui-bar .mui-icon {
		padding-top: 12px;
		color: #fff;
	}
	
	.mui-bar .mui-title {
		line-height: 50px;
	}
	.login form {
		margin-top: 50px;
	}
	.login input {
		color: #666;
		font-size: 13px;
	}
	.login .mui-input-row input {
		width: 60%;
		float: left;
	}
	.login .mui-input-row label {
		font-size: 14px;
		text-align: right;
	}
	.login button {
		width: 94%;
		line-height: 30px;
		margin: 30px 3%;
		background-color: #0186c2;
		color: #fff;
	}
	.login .jiaoyan {
		color: red;
		font-size: 14px;
		line-height: 30px;
		padding-left: 3%;
	}
	.alert {
		display: none;
		position: absolute;
		left: 50%;
		bottom: 100px;
		transform: translateX(-50%);
		width: 30%;
		height: 50px;
		border-radius: 4px;
		background-color: #333;
		color: #fff;
		text-align: center;
		line-height: 50px;
	}
</style>